---
import Layout from "../layouts/Layout.astro";
import src from './_og.jpg?url';

const ctas = [
  {
    title: "Contributors",
    description: "Celebrate your GitHub contributions 🥳",
    href: "/contributors/",
    img: {
      src: "/v1/contributor/sunzhongkai588.svg",
      alt: "@sunzhongkai588 PaddlePaddle contributions",
      width: "320",
      height: "192",
    },
  },
  {
    title: "Badges",
    description: "Add a badge to your repository or website",
    href: "/badges/",
    img: {
      src: "/v1/built-with-paddlepaddle/previews.svg",
      alt: "Built with PaddlePaddle",
      width: "395",
      height: "213",
    },
  },
];
---

<Layout
  wide
  ogImg={{ src, alt: 'The text “Badges for PaddlePaddle” over some examples of PaddlePaddle badges.' }}
>
  <div class="absolute -z-10 top-0 left-1/2 -translate-x-1/2 translate-y-[10%] sm:-translate-y-[10%] w-[50rem] max-w-full aspect-square opacity-25 bg-blue-green-gradient mask-radial-gradient"/>
  <div class="flex flex-col gap-20 sm:gap-10">
    <h1 class="mt-8 flex flex-col items-center gap-4">
      <svg class="h-9" viewBox="0 0 63 36" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M33.5298 5.83784C35.1418 5.83784 36.4487 4.531 36.4487 2.91892C36.4487 1.30684 35.1418 0 33.5298 0C31.9176 0 30.6109 1.30684 30.6109 2.91892C30.6109 4.531 31.9176 5.83784 33.5298 5.83784ZM46.9568 7.97838H42.2866L29.6379 36H34.3082L46.9568 7.97838ZM62.1352 2.91892C62.1352 4.531 60.8283 5.83784 59.2163 5.83784C57.6041 5.83784 56.2974 4.531 56.2974 2.91892C56.2974 1.30684 57.6041 0 59.2163 0C60.8283 0 62.1352 1.30684 62.1352 2.91892ZM26.4271 11.4811L28.0662 7.9784L28.0812 7.97838C32.1649 7.97838 35.4758 11.2891 35.4758 15.373C35.4758 19.4569 32.1649 22.7676 28.0812 22.7676H16.7351L18.4919 18.8757H28.0812C30.0156 18.8757 31.5839 17.3075 31.5839 15.373C31.5839 13.4385 30.1244 12 28.1785 11.6757C27.3871 11.5438 26.4271 11.4811 26.4271 11.4811ZM53.7527 7.9784L52.1136 11.4811C52.1136 11.4811 53.0735 11.5438 53.865 11.6757C55.8109 12 57.2704 13.4385 57.2704 15.373C57.2704 17.3075 55.7021 18.8757 53.7677 18.8757H44.1784L42.4216 22.7676H53.7677C57.8514 22.7676 61.1623 19.4569 61.1623 15.373C61.1623 11.2891 57.8514 7.97838 53.7677 7.97838L53.7527 7.9784ZM16.6 7.97838H21.2704L8.62163 36H3.95136L9.92432 22.7676H0L1.75676 18.8757H11.6811L16.6 7.97838Z" fill="white"/>
      </svg>
            
      <span class="sr-only">PaddlePaddle</span>
      <span
        class="z-0 px-4 py-2 shadow-md uppercase relative text-white font-mono text-4xl
          before:block before:absolute before:inset-0 before:rounded-lg before:bg-red-pink-gradient before:-z-10
          after:block after:absolute after:inset-0.5 after:rounded-[6px] after:bg-neutral-700/50 after:-z-10"
      >
        Badges
      </span>
    </h1>
    
    <ul class="grid grid-cols-1 sm:grid-cols-2 gap-6 gap-y-12">
      {
        ctas.map(({ href, title, description, img }) => (
          <li class="flex flex-col-reverse flex-grow border border-neutral-600 shadow-2xl relative group will-change-transform focus-within:outline motion-safe:transition motion-safe:duration-700 hover:-translate-y-1 focus-within:-translate-y-1">
            <div class="p-4 sm:p-6 bg-neutral-600 group-hover:bg-neutral-600/50 transition-colors duration-700 space-y-2 sm:space-y-4">
              <h2 class="heading-4 sm:heading-3">
                <a {href} class="after:absolute after:inset-0 focus:outline-none link duration-700">
                  {title}
                </a>
              </h2>
              <p>{description}</p>
            </div>
            <div class="p-4 md:p-8 flex h-full bg-gradient-to-b from-black to-black sm:to-black/20 group-hover:bg-black/30 transition duration-700">
              <img {...img} class="pointer-events-none m-auto drop-shadow-lg brightness-100 group-focus-within:brightness-125 group-hover:brightness-110 transition-[filter] duration-700" />
            </div>
          </li>
        ))
      }
    </ul>
  </div>
</Layout>
